<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import type { Fruit } from './水果商城.vue';

const props = defineProps<{
  item:Fruit
}>()

const emit = defineEmits<{
  (e: 'addGoods', id: number): void
  (e: 'reduceGoods', id: number): void
  (e: 'deleteGoods', id: number): void
}>()

</script>

<template>
  <div class="tr active">
    <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
    <div class="td"><img :src="item.icon" alt="" /></div>
    <div class="td">{{ item.price }}</div>
    <div class="td">
      <div class="my-input-number">
        <button :disabled="item.num <= 1" class="decrease" @click="emit('reduceGoods',item.id)"> - </button>
        <span class="my-input__inner">{{ item.num }}</span>
        <button class="increase" @click="emit('addGoods',item.id)"> + </button>
      </div>
    </div>
    <div class="td">{{ item.num*item.price }}</div>
    <div class="td" v-on:click="emit('deleteGoods',item.id)"><button>删除</button></div>
  </div>
</template>

<style scoped>
  
@import '../../style/inputnumber.css';
@import '../../style/index.css';
</style>